<!DOCTYPE html>
<html>

<head>
  <script src="../node_modules/angular/angular.js"></script>
</head>

<body ng-app="demo">
  <div ng-controller="DemoController">
    <button ng-click="queryList()">获取List</button>
    <button ng-click="queryTable()">获取Table</button>
    <p>{{ loading ? '正在获取...' : '完成' }}</p>
  </div>
  <script>
    angular
      .module('demo', [])
      .controller('DemoController', ['$scope', '$q', function ($scope, $q) {
        $scope.loading = false

        $scope.queryList = function () {
          $scope.loading = true
          serverApi().then(res => {
            console.log(res)
            $scope.loading = false
          })
        }

        var serverApi = function () {
          console.log('send api...')
          const deferred = $q.defer()
          setTimeout(() => {
            console.log('done')
            deferred.resolve('result')
          }, 1000)
          return deferred.promise
        }

        $scope.queryTable = function () {
          $scope.loading = true
          anotherServerApi().then(res => {
            console.log(res)
            $scope.loading = false
          })
        }

        var anotherServerApi = function () {
          return $q((resolve, reject) => {
            setTimeout(() => {
              console.log('done')
              resolve('result')
            }, 1000)
          })
        }
      }]);
  </script>
</body>

</html>